<template>
  <!--用柱状图展示消费额最高的省份-->
  <div id="AmountHighProvince" :style="{ width: '800px', height: '400px' }"></div>
</template>

<script>

import axios from 'axios'
import * as echarts from 'echarts'

export default {
  name: "AmountHighProvince",

  setup() {

    axios(
        {
          method: 'get',
          url: 'http://139.198.108.127:8080/get/high-amount-province'
        }
    ).then((res) => {
      const data = res.data.data
      console.log(data)
      const dom = document.getElementById('AmountHighProvince');
      const myChart = echarts.init(dom); // 初始化echarts实例
      const provinceNames = [];
      const amountS = [];

      const itemMap = new Map()
      //遍历请求到的数据 按照省份名分别求总的消费额
      data.forEach((item) => {
        if (itemMap.has(item.province_name)) {
          const tempAmount = Number(itemMap.get(item.province_name)) + Number(item.total_amount)
          itemMap.set(item.province_name, tempAmount)
        } else {
          itemMap.set(item.province_name, item.total_amount)
        }
      })

      console.log(itemMap)
      console.log(Array.from(itemMap))

      //转换为数组方便安装从大到小的顺序排序
      var itemList = Array.from(itemMap);
      itemList.sort((a, b) => {
       return b[1] - a[1]
      })
      console.log(itemList)
      //去除前五个
      for (let i = 0; i < 5; i++) {
        provinceNames.push(itemList[i][0])
        amountS.push(itemList[i][1])
      }

      var option = {
        xAxis: {
          type: 'category',
          data: provinceNames
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: amountS,
            type: 'bar'
          }
        ]
      };

      option && myChart.setOption(option);
    })
  }
}
</script>

<style scoped>

</style>